<template>
	<view class="money">
		<!-- 当前积分 -->
		<view class="money-before">
			<view class="before">当前积分</view>
			<view class="numbers">{{record.available_integral}}</view>
			<view class="send">积分兑换最低为<text class="title">{{record.min_integral}}</text>积分，请 <button class="concat" open-type="contact">联系管理员</button></view>
			<view class="rule" @click="toRule" >规则</view>
		</view>
		
		<!-- 弹框 -->
		<!-- <view class="modal" v-if="show" @click="show=false">
			<view class="modal-body">
				<view></view>
			</view>
		</view>
		<view class="text" v-if="show==true">
			<view>{{rule.content}}</view>
			<view class="close" >
				<text class="btn" @click="show=false">X</text>
			</view>
		</view> -->
		<!-- 积分统计 -->
		<!-- <view class="money-census">
			<view class="census">积分统计</view>
			<view v-if="record">
				<view class="share">
					<view class="share-item">二级分享</view>
					<view class="share-item">三级分享</view>
				</view>
				<view class="gdp">
					<view class="gdp-item">
						<text>{{record.level_2}}</text>,
						<text>{{record.level_2_percent}}</text>
					</view>
					<view class="gdp-item">
						<text>{{record.level_3}}</text>,
						<text>{{record.level_3_percent}}</text>
					</view>
				</view>
			</view>
			<view class="undata" v-else>
				<text>暂无积分统计，快去分享拿提成吧~</text>
			</view>
		</view> -->
		<!-- 兑换记录 -->
		<view class="money-record">
			<view class="record">兑换记录</view>
			<view v-if="record.exchange_record!=[]">
				<view class="lists" v-for="(item,index) in record.exchange_record ">
					<text class="times">{{item.created_at}}</text>
					<view class="lists-item">
						<image class="pic" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/pic.png" mode=""></image>
						<view class="many">兑换{{item.integral}}积分</view>
						<view class="success">兑换成功</view>
					</view>
				</view>
			</view>
			<view class="undata" v-else>
				<text>暂无兑换记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	export default{
		data(){
			return{
				record:'',
				rule:'',
				show:false
			}
		},
		onShow(){
			this.getCurrentIntegralRecord();
			this.getIntegralRule();
		},
		methods:{
			toRule() {
				uni.navigateTo({
					url: "/pages/rule/index?type="+'integral'
				})
			},
			async getCurrentIntegralRecord(){
				//获取积分
				let  param ={
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getCurrentIntegralRecord(param)
				if(res.data.level=='success'){
					this.record=res.data.data
				}
			},
			// 	async getIntegralRule(){
			// 	//获取规则
			// 	let res=await this.$api.getIntegralRule()
			// 	if(res.data.level=='success'){
			// 		this.rule=res.data.data
			// 	}
			// },
		}
	}
</script>

<style scoped lang="scss">
	.money{
		padding: 20rpx;
		position: relative;
		.before{
			font-weight: 600;
		}
		.numbers{
			padding: 20rpx 0;
			font-weight: 600;
		}
		.send{
			font-size: 30rpx;
		}
		.title{
			color: deepskyblue;
			padding: 0 10rpx;
		}
		.rule{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 30rpx;
			color: #333;
		}
		.text{
			position: fixed;
			z-index: 100;
			background: #fff;
			width: 500rpx;
			height: 500rpx;
			text-align: center;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.close{
			position: relative;
			bottom: -350rpx;
			font-size: 50rpx;
		}
		.census,.record{
			font-weight: 600;
			padding: 20rpx 0;
		}
		.share{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.share-item{
			padding: 0 50rpx;
		}
		.gdp{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: deepskyblue;
			margin: 30rpx 0;
		}
		.gdp-item{
			padding: 0 80rpx;
		}
		.lists{
			background: #fff;
			width: 100%;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			.times{
				font-size: 30rpx;
				color: #ccc;
				padding-left: 20rpx;
			}
			.lists-item{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				padding: 10rpx 0;
				.pic{
					width: 56rpx;
					height: 56rpx;
					padding-left: 20rpx;
				}
				.many{
					font-size: 30rpx;
					width: 70%;
					text-align: center;
				}
				.success{
					font-size: 30rpx;
					color: lightskyblue;
				}
			}
		}
	}
	.undata{
		padding: 30rpx;
		text-align: center;
		color: #ccc;
		font-size: 30rpx;
	}
	.concat{
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: none;
		border: none;
		padding: 10rpx;
		display: inline;
		font-size: 30rpx;
		color: lightskyblue;
		&::after{
			border: none;
		}
	}
</style>
